<template>
     <div id="section1Page" class="flex">
       <div class="sec_left1">
         <div class="block" style="height: 100%;">
           <el-carousel trigger="click">
             <el-carousel-item v-for="item in banner" :key="item.id">
               	<img style="width: 100%;height: 100%;" :src="item.image" alt="">
             </el-carousel-item>
           </el-carousel>
         </div>
       </div>
       <div class="sec_right1">
         <el-tabs v-model="activeName3" type="card">
           <el-tab-pane name="first">
             <span class='ios' slot="label">IOS版</span>
             <div class="ios-con">
               <p>适用于IOS6.0及以上平台</p>
               <img src="../../../../static/img/andriod.png" alt="IOS版二维码">
               <p style='color: #e4393c;'>扫一扫二维码下载Iphone版</p>
             </div>
           </el-tab-pane>
           <el-tab-pane name="second">
             <span class='android' slot="label">Android版</span>
             <div class="ios-con">
               <p>适用于Android及以上平台</p>
               <img src="../../../../static/img/andriod.png" alt="Android版二维码">
               <p style='color: #e4393c;'>扫一扫二维码下载Android版</p>
             </div>
           </el-tab-pane>
         </el-tabs>
       </div>
     </div>
</template>

<script>
  export default {
    data () {
      return {
        activeName3: 'first',
        iosPic: '../../../../static/img/code.png',
        androidPic: '../../../../static/img/code.png',
        banner: []
      }
    },
    created () {
    	this.$api.request_banner().then((res) => {
    		this.banner = res.data.list
    	})
    },
    methods: {}

  }
</script>

<style lang="less">
#section1Page .sec_right1 {
  padding: 7px;
}
#section1Page .el-tabs__header {
  margin-bottom: 7px;
}
#section1Page {
  .ios,
  .android {
    position: relative;
    display: inline-block;
    line-height: 30px;
    color: #test;
  }
  .ios-con,
  .android-con {
    img {
      display: block;
      width: 120px;
      height: 120px;
      margin: 0 auto;
    }
  }
}
#section1Page{
  li{
    padding-bottom:5px;
  }
  .el-tabs__nav{
    width: 100%;
  }
.el-tabs__nav >div{
  width: 50%;
}
  .el-tabs__item.is-active {
    border-top: 4px solid #e4393c;
    color:#e4393c ;
    position: relative;
  }
}
#section1Page{
    .sec_left1{
      flex:1;
      height:230px;
      padding-right: 8px;
    }
  .sec_right1{
    width: 230px;
    height: 230px;
    border:1px solid #ccc;
  }

.el-carousel,.el-carousel__container{
  height:100%!important;
}
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
}
</style>
